<template>
  <div class="rule">
    <div class="content">
      <div class="title">
        /分销规则
        <span style="margin-left: 20px;font-size: 14px;color:#909399">商家的抽成比例：{{businessProportion}}%(即商品利润的百分比)</span>
      </div>
      <el-table
        :data="ruleData"
        stripe
        border
      >
        <el-table-column
          prop="level"
          label="级别">
        </el-table-column>

        <el-table-column
          prop="order_num"
          label="至少完成的指标订单">
        </el-table-column>

        <el-table-column
          prop="proportion"
          label="抽成比例">
        </el-table-column>

        <el-table-column>
          <template slot="header" slot-scope="scope">
            <el-button
              size="mini"
              @click="handleAdd">新增分销商</el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <el-dialog title="分销商等级" :visible.sync="dialogFormVisible" @close="cancelDialog">
      <el-form :model="levelForm" status-icon :rules="levelRules" ref="levelForm" label-width="120px">
        <el-form-item label="级别" prop="level">
          <el-input v-model.number="levelForm.level" placeholder="请输入等级" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="指标" prop="target">
          <el-input v-model.number="levelForm.target" placeholder="请输入该等级对应至少完成的指标订单" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="抽成比例" prop="proportion">
          <el-input v-model="levelForm.proportion" placeholder="请输入该等级佣金抽成比例" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="submitRuleItem">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'Rule',
    data() {
      const validateProportion = (rule, value, callback) => {
        let reg = /^-?(100|(([1-9]\d|\d)(\.\d{1,2})?))%$/;
        if (!value) {
          callback(new Error('请输入该等级佣金抽成比例!'))
        } else if(!reg.test(value)){
          callback(new Error('请输入0%-100%之间的整数或小数点后两位的数字!'))
        }else{
          callback()
        }
      };
      const validateLevel = (rule, value, callback) => {
        console.log(value);
        if(value=='' || value==undefined){
          callback(new Error('请输入分销商的设置等级!'))
        }else if (value<=0) {
          callback(new Error('等级不能小于1!'))
        }else{
          callback()
        }
      };
      return {
        ruleData:[],
        levelForm:{},
        levelRules:{
          level:[
            { required: true, validator: validateLevel},
            { type: 'number', message: '等级必须为数字！'}
          ],
          target:[
            { required: true, message: '请输入该等级分销商至少完成的订单指标'},
            { type: 'number', message: '订单指标必须为数字！'}
          ],
          proportion:[
            { required: true, validator: validateProportion }
          ],
        },
        dialogFormVisible:false,
        businessProportion:null
      }
    },
    created() {
      this.getRuleList()
    },
    methods: {
      //获取等级列表
      getRuleList(){
        this.axios.get('/api/distribution/rule').then((res=>{
          if(res.data.errCode==0){
            this.ruleData = res.data.result;
            let count = 0;
            res.data.result.forEach((val,index,array)=>{
              count += parseInt(val.proportion);
            });
            this.businessProportion=100-count;
          }
        })).catch(error=>{
          console.log(error)
        });
      },
      //新增
      handleAdd(){
        this.levelForm={};
        this.dialogFormVisible=true
      },
      //编辑
      handleEdit(index,row){
        let levelJson = {
          id:row.id,
          level:row.level,
          target:row.order_num,
          proportion:row.proportion
        };
        this.levelForm=levelJson;
        this.dialogFormVisible=true;
      },
      //删除
      handleDelete(index,row){
        this.$confirm('此操作将删除该条分销商设置记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //调删除分销商接口
          this.axios.post('/api/distribution/rule/delete',{id:row.id}).then((res=>{
            if(res.data.errCode==9){
              this.$message.error(res.data.message)
            }else if(res.data.errCode==0){
              this.$message.success(res.data.message);
              this.getRuleList();
            }
          })).catch(error=>{
            console.log(error)
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //弹窗取消
      cancelDialog(){
        this.$refs.levelForm.resetFields();
        this.dialogFormVisible=false;
        this.levelForm={}
      },
      submitRuleItem(){
        this.$refs.levelForm.validate(valid => {
          if (valid) {
            if(parseFloat(this.levelForm.proportion)==0){
              this.$message.error("一级分销商的抽成比例不得少于0");
              return
            }
            //发起请求
            let url = this.levelForm.id?'/api/distribution/rule/alter':'api/distribution/rule/add';
            this.axios.post(url,this.levelForm).then((res=>{
              if(res.data.errCode==9){
                this.$message.error(res.data.message)
              }else if(res.data.errCode==0){
                this.$message.success(res.data.message);
                this.getRuleList();
                this.dialogFormVisible=false;
              }
            })).catch(error=>{
              console.log(error)
            });
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .rule{
    padding: 0 20px;
    .content{
      .title{
        width: 100%;
        height: 60px;
        line-height: 60px;
      }
    }
  }
</style>
